<template>
  <el-dialog
    v-model="dialogVisible"
    title="文件信息"
    :draggable="true"
    :fullscreen="isMobile"
  >
    <el-descriptions border>
      <el-descriptions-item label="文件名">{{
        file.filename
      }}</el-descriptions-item>
      <el-descriptions-item label="大小">{{
        formatFileSize(file.size)
      }}</el-descriptions-item>
      <el-descriptions-item label="修改时间">{{
        formatToDateTime(file.updatedAt)
      }}</el-descriptions-item>
      <el-descriptions-item label="类型"
        ><el-tag size="small">{{ file.type }}</el-tag></el-descriptions-item
      >
      <el-descriptions-item label="路径">{{
        "我的空间/" + file.path
      }}</el-descriptions-item>
      <el-descriptions-item label="上传时间">{{
        formatToDateTime(file.createdAt)
      }}</el-descriptions-item>
      <el-descriptions-item label="上传者">{{
        file.userId
      }}</el-descriptions-item>
      <el-descriptions-item label="删除时间" v-if="file.isDeleted">{{
        formatToDateTime(file.deletedAt)
      }}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button type="primary" @click="close">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, computed } from "vue";
import { formatToDateTime, formatFileSize } from "../utils/FormatUtil";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize();
const isMobile = computed(() => width.value < 768);

const dialogVisible = ref(false);

const file = ref(null);

const open = (row) => {
  file.value = row;
  dialogVisible.value = true;
};
const close = () => {
  dialogVisible.value = false;
};
defineExpose({
  open,
  close,
});
</script>
